<template>
    <div class="body-content">
        <div class="content-main">
            <div class="bodys start">
                <div class="vbox" style="height: auto;">
                    <div class="within adapt-pc" style="padding-top:0;">
                        <span><router-link to="/" class="icon-pull-left" style="margin-left:10px;">返回首页</router-link></span>
                    </div>
                </div>
            </div>
            <div class="bodys start">
                <div class="vbox">
                    <div class="vleft e1">
                        <div class="box va">
                            <div class="tit">您心目中理想的移民国家？<span> 可多选</span></div>
                            <ul>
                                <li v-for="(c,index) of cities" :key="index"
                                    :class="{checked:c.bOn}"
                                    @click="checkbox(index,c)">
                                    {{c.city}}
                                </li>
                            </ul>
                        </div>
                        <div class="box vb">
                            <div class="tit">您想移民的话，比较看重哪几点？<span> 可多选</span></div>
                            <ul>
                                <li v-for="(item,index) of valueList" :key="index"
                                    :class="{checked:item.bOn}"
                                    @click="checvalue(index,item)">
                                    {{item.vauke}}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="vleft e2">
                        <div class="box vselect vd">
                            <div class="tit">
                                <div class="title">您的年龄</div>
                                <div>
                                    <el-select v-model="age" placeholder="请选择">
                                        <el-option
                                        v-for="item in agelist"
                                        :key="item.age"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="box vselect ve">
                            <div class="tit">
                                <div class="title">您的最高学历</div>
                                <div>
                                    <el-select v-model="education" placeholder="请选择">
                                        <el-option
                                        v-for="item in educationlist"
                                        :key="item.education"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="box vselect vf">
                            <div class="tit">
                                <div class="title">您的工作年限</div>
                                <div>
                                    <el-select v-model="work" placeholder="请选择">
                                        <el-option
                                        v-for="item in years"
                                        :key="item.work"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="box vselect vf" style="display: flex;align-items: center;margin-bottom:60px;">
                            <div class="tit">
                                <div class="title">您的家庭净资产</div>
                                <div>
                                    <el-select v-model="property" placeholder="请选择">
                                        <el-option
                                        v-for="item in propertylist"
                                        :key="item.property"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>

                        </div>
                        <div class="box vg">
                            <div class="tit">主申请人外语能力</div>
                            <ul>
                                <li v-for="(item,index) of language" :key="index"
                                :class="{checked:index==n}" @click="changeList(index,item)">{{item.label}}</li>
                            </ul>
                        </div>
                        <div class="box vh">
                            <div class="tit">可接受海外居住时间？<br><span>部分项目对未拿到身份(主)申请人有居住要求</span></div>
                            <ul>
                                <li v-for="(item,index) of residence" :key="index"
                                :class="{checked:index==o}" @click="changetime(index,item)">{{item.label}}</li>
                            </ul>
                        </div>

                    </div>
                    <div class="vleft e3">
                        <div class="adapt-m tip">为了定制更适合的移民方案，必要信息需要您再次确认</div>
                        <div class="inp-box" >
                            <div>
                                <div class="username">
                                    <span>您的姓名：</span><input type="text" name="name" v-model="contacts">
                                </div>
                                <!-- <div class="sex">
                                    <span class="em emn">先生</span><div data-name="sex" data-id="1" class="radio cur"></div>
                                    <span class="em">女士</span><div data-name="sex" data-id="2" class="radio"></div>
                                </div> -->
                            </div>
                            <div class="sjh">
                                <span class="sjh-tit">手机号：</span>
                                <input type="text" name="phone" value="" v-model="contactsPhone">
                                <span class="error icon-tanhao-copy">&nbsp;&nbsp;&nbsp;请输入有效的手机号!</span>
                            </div>
                            <span class="beizhu">备注：我们会对您的资料严格保密。</span>
                        </div>
                        <div class="click"><a href="#v4" class="button" @click="save">提交</a></div>
                    </div>
                </div>
            </div>
            <div class="bodys end" v-if="promptshow">
                <div class="vbox">
                    <div class="within adapt-m" id="v4">
                        <img src="@/assets/image/success.png">
                        <em>提交成功</em>
                        <p>您的私人规划师会在2小时内跟您沟通</p>
                        <span>工作时间(8:00—20:00),公休假日可能会顺延.</span>
                        <div class="click"><a href="/" class="button" style="margin-left:10px;">返回首页</a></div>
                    </div>
                </div>
            </div>

            <div class="click-box" v-if="promptshow">
                <div>
                    <img src="@/assets/image/success.png" alt="" class="dui">
                    <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                    <span>您的私人规划师会在2小时内跟您沟通～</span>
                    <p>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</p>
                    <em class="xxx" @click="konwbtn">我知道了</em>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import { apply} from '@/api/index'
export default {
    data(){
        return{
            cities : [
                {city:"美国",bOn:false},
                {city:"加拿大",bOn:false},
                {city:"希腊",bOn:false},
                {city:"西班牙",bOn:false},
                {city:"英国",bOn:false},
                {city:"土耳其",bOn:false},
                {city:"澳大利亚",bOn:false},
                {city:"日本",bOn:false},
                {city:"爱尔兰",bOn:false},
                {city:"葡萄牙",bOn:false},
                {city:"马耳他",bOn:false},
                {city:"其他",bOn:false},
            ],
            valueList : [
                {vauke:"子女教育",bOn:false},
                {vauke:"海外生育",bOn:false},
                {vauke:"资产配置",bOn:false},
                {vauke:"海外医疗",bOn:false},
                {vauke:"出入境方便",bOn:false},
                {vauke:"海外置业",bOn:false},
            ],
            contractTagList:[],//选中的移民国家
            vaukeList:[],//选中的看重
            propertylist: [{
                value: '100万以内',
                label: '100万以内'
                }, {
                value: '100-500万元',
                label: '100-500万元'
                }, {
                value: '500万元以上',
                label: '500万元以上'
                }, 
            ],
            property:'',
            value: '',
            years: [{
                value: '3年以下',
                label: '3年以下'
                }, {
                value: '3-5年',
                label: '3-5年'
                }, {
                value: '5年以上',
                label: '5年以上'
                }, 
            ],
            work:'',
            educationlist: [{
                value: '高中或技校职高',
                label: '高中或技校职高'
                }, {
                value: '大专',
                label: '大专'
                }, {
                value: '本科学士学位',
                label: '本科学士学位'
                }, {
                value: '硕士学位及以上',
                label: '硕士学位及以上'
                }, 
            ],
            education:'',
            agelist: [{
                value: '18～29岁',
                label: '18～29岁'
                }, {
                value: '30～39岁',
                label: '30～39岁'
                }, {
                value: '40～49岁',
                label: '40～49岁'
                }, {
                value: '50岁以上',
                label: '50岁以上'
                }, 
            ],
            age:'',
            language:[
                {label:"专业英语8级（雅思7分及以上）",value:"专业英语8级（雅思7分及以上）"},
                {label:"大学英语6级优秀（雅思6分）",value:"大学英语6级优秀（雅思6分）"},
                {label:"大学英语6级（雅思5分",value:"大学英语6级（雅思5分"},
                {label:"大学英语4级（雅思4分）",value:"大学英语4级（雅思4分）"},
                {label:"中学英语水平（雅思3分）",value:"中学英语水平（雅思3分）"},
                {label:"水平欠佳",value:"水平欠佳"},
            ],
            n : -1,
            residence:[
                {label:"每年仅登陆一次",value:"每年仅登陆一次"},
                {label:"每年可住半年以上",value:"每年可住半年以上"},
                {label:"每年可住10个月以上",value:"每年可住10个月以上"},
                {label:"可接受任何居住要求",value:"可接受任何居住要求"},
            ],
            o:-1,
            contacts:'',
            contactsPhone:'',
            foreignLanguage:'',
            liveTime:'',
            promptshow:false,
        }
    },
    methods: {
        checkbox(i,c){
            this.cities[i].bOn = !this.cities[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checvalue(i,item){
            this.valueList[i].bOn = !this.valueList[i].bOn;
            if (this.vaukeList.includes(item.vauke)) {
                this.vaukeList.splice(this.vaukeList.indexOf(item.vauke), 1)
            } else {
                this.vaukeList.push(item.vauke)
            }
        },
        changeList(index,item){
            console.log(item,'是什么')
            this.n = index;//this指向app
            this.foreignLanguage = item.value
        },
        changetime(index,item){
            this.o = index;//this指向app
            this.liveTime = item.value
        },
        save(){
            if(!this.contacts){
                this.$message.error( '请输入您的姓名');
                return;
            }
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
                this.$message.error( '请输入手机号');
                return;
            }
            apply({
                id:this.id,
                contacts:this.contacts,
                contactsPhone:this.contactsPhone,
                education:this.education,
                familyAssets:this.property,
                foreignLanguage:this.foreignLanguage,
                idealCountry:this.contractTagList.join(","),
                liveTime:this.liveTime,
                objective:this.vaukeList.join(","),
                workYear:this.work,
            }).then(res => {
                if (res.success) {
                    this.promptshow = true
                    this.$message.success('保存成功')
                    
                }
            })
        },
        konwbtn(){
            this.promptshow = false
            this.$router.go(-1)
        },
        close(){
            this.promptshow = false
        },
    },
    name: "evaluate",
}
</script>
<style lang="scss" scoped>
@import "src/assets/css/volume";
@import "src/assets/css/project-index";
@import "src/assets/css/article-detail";

.body-content{
    .project-banner{
        height: 300px;
        .swiper-pagination{
            bottom: 20px;
            text-align: center;
            width: 200px !important;
            margin-left: -50px;
        }
    }
    .within-tiit{
        position: fixed;
        top: 0;
        left: 0;
        width: 480px;
        height: 234px;
        background: #FFFFFF;
        border-radius: 8px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        text-align: center;
        div{
            font-size: 24px;
            font-weight: 500;
            color: #100D24;
        }
        p{
            font-size: 14px;
            font-weight: 400;
            color: #100D24;
        }
    }
}
</style>